<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>课程列表 - 分页展示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .actions {
            text-align: center;
        }

        .actions a {
            margin: 0 10px;
            color: #4CAF50;
            text-decoration: none;
        }

        .actions a:hover {
            text-decoration: underline;
        }

        .pagination {
            text-align: center;
            margin-top: 20px;
        }

        .pagination a {
            margin: 0 5px;
            padding: 8px 16px;
            text-decoration: none;
            background-color: #4CAF50;
            color: white;
            border-radius: 4px;
        }

        .pagination a:hover {
            background-color: #45a049;
        }

        .pagination .disabled {
            background-color: #ddd;
            color: #aaa;
            pointer-events: none;
        }

        .add-course {
            display: block;
            width: 180px;
            margin: 20px auto;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 4px;
        }

        .add-course:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<h1>课程列表 - 分页展示</h1>
<table>
    <thead>
    <tr>
        <th>课程编号</th>
        <th>课程名称</th>
        <th>课程学分</th>
        <th>课时</th>
        <th>课程类型</th>
        <th class="actions">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="course : ${page.content}">
        <td th:text="${course.courseId}"></td>
        <td th:text="${course.courseName}"></td>
        <td th:text="${course.courseScore}"></td>
        <td th:text="${course.courseTime}"></td>
        <td th:text="${course.courseType}"></td>
        <td class="actions">
            <a th:href="@{/course/findById/{courseId}(courseId=${course.courseId})}">查看</a>
            <a th:href="@{/course/updateCourse/{courseId}(courseId=${course.courseId})}">更新</a>
            <form th:action="@{/course/deleteCourse/{courseId}(courseId=${course.courseId})}" method="post" style="display:inline;">
                <input type="hidden" name="_method" value="delete">
                <input type="submit" value="删除" onclick="return confirm('确认删除此课程吗？');">
            </form>
        </td>
    </tr>
    </tbody>
</table>

<div class="pagination">
    <a th:if="${page.number > 0}" th:href="@{/course/findAll3(start=${page.number - 1}, size=${page.size})}">上一页</a>
    <span>当前页：<span th:text="${page.number + 1}"></span> / <span th:text="${page.totalPages}"></span></span>
    <a th:if="${page.number + 1 < page.totalPages}" th:href="@{/course/findAll3(start=${page.number + 1}, size=${page.size})}">下一页</a>
</div>

<a href="/course/addCourse" class="add-course">添加新课程</a>
</body>
</html>
